<script setup>
import router from "@/router/index.js";
// import '../assets/css/businessInfo.css'

function gotoOrder(){
    router.push("/order")
}

const foodList = [
  {
    name: "纯肉鲜肉（水饺）",
    desc: "新鲜猪肉",
    price: 15,
    image: "img/sp01.png",
    quantity: 3
  },
  {
    name: "玉米鲜肉（水饺）",
    desc: "玉米鲜肉",
    price: 16,
    image: "img/sp02.png",
    quantity: 2
  },
  {
    name: "虾仁三鲜（蒸饺）",
    desc: "虾仁三鲜",
    price: 22,
    image: "img/sp03.png",
    quantity: 0
  },
  {
    name: "素三鲜（蒸饺）",
    desc: "素三鲜",
    price: 15,
    image: "img/sp04.png",
    quantity: 0
  },
  {
    name: "角瓜鸡蛋（蒸饺）",
    desc: "角瓜鸡蛋",
    price: 16,
    image: "img/sp05.png",
    quantity: 0
  },
  {
    name: "小白菜肉（水饺）",
    desc: "小白菜肉",
    price: 18,
    image: "img/sp06.png",
    quantity: 0
  },
  {
    name: "芹菜牛肉（水饺）",
    desc: "芹菜牛肉",
    price: 18,
    image: "img/sp07.png",
    quantity: 0
  }
];

</script>

<template>
  <div class="wrapper">

    <!-- header部分 -->
    <header>
      <p class="bg-[rgb(0,151,255)] h-[75px] text-white text-center text-[30px] pt-4 fixed top-0 left-0 right-0 z-50">商家信息</p>
    </header>
    <div class="h-[80px]"></div>


    <!-- 商家logo部分 -->
    <div class="business-logo text-center ">
      <img src="img/sj01.png" class="mx-auto">
    </div>

    <!-- 商家信息部分 -->
    <div class="business-info text-center text-[14px] text-gray-600 ">
      <h1 class="pt-2 text-[20px] font-[800] text-black ">万家饺子（软件园E18店）</h1>
      <p class="pt-2">&#165;15起送 &#165;3配送</p>
      <p class="pt-2">各种饺子炒菜</p>
    </div>

    <!-- 食品列表部分 -->
    <ul class="food">
      <li v-for="item in foodList" :key="item.name" class="flex mt-2">
        <div class="food-left flex">
          <img :src="item.image" class="w-18 h-18">
          <div class="food-left-info ml-2 text-[14px] text-gray-700" >
            <h3 class="mt-2 text-[17px] font-[700] text-gray-500 ">{{item.name}}</h3>
            <p class="mt-2">{{item.desc}}</p>
            <p class="mt-2">&#165;{{item.price}}</p>
          </div>
        </div>
        <div class="food-right ml-auto mt-5  font-[600] text-[20px] flex">
          <div>
            <i  v-if="item.quantity>0" class="fa fa-minus-circle  pr-3 text-gray-300"></i>
          </div>
          <p v-if="item.quantity>0" class=" pr-3"><span>{{item.quantity}}</span></p>
          <div>
            <i class="fa fa-plus-circle pr-3  text-blue-400"></i>
          </div>
        </div>
      </li>

    </ul>

    <!-- 购物车部分 -->
    <div class="cart flex fixed bottom-0 left-0 right-0 h-14  z-50   overflow-visible"  >
      <div class="cart-left flex bg-gray-400 text-white  w-[70%]  overflow-visible">
        <div class="cart-left-icon w-16 h-16 bg-blue-500 flex  ml-3 border-4  items-center justify-center  border-gray-700 rounded-full z-20 relative">
          <i class="fa fa-shopping-cart  w-6 h-6"></i>
          <div class="cart-left-icon-quantity   absolute top-0 right-0  bg-red-500 text-center rounded-full  w-6 h-6">3</div>
        </div>
        <div class="cart-left-info pl-3">
          <p>&#165;12.88</p>
          <p>另需配送费3元</p>
        </div>
      </div>
      <div class="cart-right bg-green-500 w-[30%] text-white font-[900] text-[25px] text-center pt-3">
        <!-- 不够起送费 -->
        <!--
        <div class="cart-right-item">
          &#165;15起送
        </div>
        -->
        <!-- 达到起送费 -->
        <div class="cart-right-item" @click="gotoOrder">
          去结算
        </div>
      </div>
    </div>

  </div>

</template>

<style scoped>

</style>